<script setup>
import { onMounted, ref, shallowRef, inject } from "vue";
import emitter from "@/utils/mitt.js";

const getAssetsFile = inject("getAssetsFile");

const changePath = (path, query = null) => {
	emitter.emit("changePath", {
		path: path,
		query: query,
	});
};
</script>

<template>
	<div class="sideTop">
		<div class="sideTopContent flex flex_end align_itemsCenter">
			<n-button
				text
				class="sideTopContentButton hidden"
				style="--n-text-color-hover: #27649c; --n-text-color-press: #27649c; --n-text-color-focus: #27649c">
				登录
			</n-button>
			<n-divider vertical class="hidden" />
			<n-button
				text
				class="sideTopContentButton hidden"
				style="--n-text-color-hover: #27649c; --n-text-color-press: #27649c; --n-text-color-focus: #27649c">
				注册
			</n-button>
			<n-divider vertical class="hidden" />
			<n-button
				text
				class="sideTopContentButton hidden"
				style="--n-text-color-hover: #27649c; --n-text-color-press: #27649c; --n-text-color-focus: #27649c">
				加入收藏
			</n-button>
			<img :src="getAssetsFile('img/sider/logoTop.png')" alt="" class="sideTopImg" />
		</div>
		<div class="colorLine">
			<div class="colorLineContent flex flex_end align_itemsCenter">
				<div class="flex align_itemsCenter" style="width: 700px">
					<n-button text :color="'#fff'" size="large" @click="changePath('/')">
						<div style="font-size: 16px">首页</div>
					</n-button>
					<n-divider vertical class="dividerMenuClass" />
					<n-popover trigger="hover" placement="bottom-start" :show-arrow="false">
						<template #trigger>
							<n-button text :color="'#fff'" size="large" @click="changePath('/index/about')">
								<div style="font-size: 16px">关于</div>
							</n-button>
						</template>
						<div class="popoverMenu">
							<n-space>
								<n-button text @click="changePath('/index/about/summaryAbout')">
									<div style="font-size: 18px">协会介绍</div>
								</n-button>
								<n-button text @click="changePath('/index/about/institution')">
									<div style="font-size: 18px">组织架构</div>
								</n-button>
								<n-button text @click="changePath('/index/about/certificate')">
									<div style="font-size: 18px">相关证书</div>
								</n-button>
								<n-button text @click="changePath('/index/about/summaryContact')">
									<div style="font-size: 18px">联系我们</div>
								</n-button>
							</n-space>
						</div>
					</n-popover>

					<n-divider vertical class="dividerMenuClass" />
					<n-popover trigger="hover" placement="bottom-start" :show-arrow="false">
						<template #trigger>
							<n-button text :color="'#fff'" size="large" @click="changePath('/index/news')">
								<div style="font-size: 16px">新闻</div>
							</n-button>
						</template>
						<div class="popoverMenu">
							<n-space>
								<n-button text @click="changePath('/index/news/industry')">
									<div style="font-size: 18px">行业资讯</div>
								</n-button>
								<n-button text @click="changePath('/index/news/noticeList')">
									<div style="font-size: 18px">通知公告</div>
								</n-button>
							</n-space>
						</div>
					</n-popover>
					<n-divider vertical class="dividerMenuClass" />
					<n-button text :color="'#fff'" size="large" @click="changePath('/index/ability')">
						<div style="font-size: 16px">能力评价</div>
					</n-button>
					<n-divider vertical class="dividerMenuClass" />
					<n-popover trigger="hover" placement="bottom-start" :show-arrow="false" :disabled="false">
						<template #trigger>
							<n-button text :color="'#fff'" size="large" :disabled="false" @click="changePath('/index/expert')">
								<div style="font-size: 16px">专家委员会</div>
							</n-button>
						</template>
						<div class="popoverMenu">
							<n-space>
								<n-button text @click="changePath('/index/expert/expertList')">
									<div style="font-size: 18px">专家委员会</div>
								</n-button>
								<n-button text @click="changePath('/index/expert/expertManagement')">
									<div style="font-size: 18px">管理办法</div>
								</n-button>
							</n-space>
						</div>
					</n-popover>
					<n-divider vertical class="dividerMenuClass" />
					<n-button text :color="'#fff'" size="large" :disabled="false" @click="changePath('/index/member')">
						<div style="font-size: 16px">会员</div>
					</n-button>
					<n-divider vertical class="dividerMenuClass" />
					<n-popover trigger="hover" placement="bottom-start" :show-arrow="false" :disabled="true">
						<template #trigger>
							<n-button text :color="'#fff'" size="large" :disabled="false" @click="changePath('/index/product')">
								<div style="font-size: 16px">产品</div>
							</n-button>
						</template>
						<div class="popoverMenu">
							<n-space>
								<n-button text @click="changePath('/index/product/productList')">
									<div style="font-size: 18px">产品展示</div>
								</n-button>
								<n-button text @click="changePath('/index/product/productExpoList')">
									<div style="font-size: 18px">参展报名</div>
								</n-button>
							</n-space>
						</div>
					</n-popover>
					<n-divider vertical class="dividerMenuClass" />
					<n-button text :color="'#fff'" size="large" @click="changePath('/index/policy')">
						<div style="font-size: 16px">政策</div>
					</n-button>
					<n-divider vertical class="dividerMenuClass" />
					<n-button :disabled="false" text :color="'#fff'" size="large" @click="changePath('/index/download')">
						<div style="font-size: 16px">下载</div>
					</n-button>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
.sideTop {
	/* width: 80%; */
	/* padding: 0 10%; */
	height: 123px;
	margin-bottom: 20px;
	background: #fff;
}

.sideTopContent {
	height: 73px;
	width: 80%;
	padding: 0 10%;
}

.sideTopImg {
	/* height: 121px; */
	position: absolute;
	width: 450px;
	top: 0;
	left: 10%;
}

.colorLine {
	width: 100%;
	min-width: 1400px;
	height: 50px;
	background-color: var(--primary-color);
	/* background-image: linear-gradient(#eb413a, var(--primary-color)); */
}

.colorLineContent {
	width: 80%;
	height: 50px;
	margin: 0 auto;
}

:deep(.dividerMenuClass.n-divider--vertical) {
	width: 2px;
	height: 20px;
	margin: 0 16px;
}

.popoverMenu {
	padding: 10px;
}
</style>
